<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { refAutoReset } from '@vueuse/core';
import { Page, Spinner } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import { detailApi, editApi } from '#/api/system/user';

const spinning = refAutoReset(false, 5000);

const [Form, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  schema: [
    {
      fieldName: 'admin_user_id',
      label: 'ID',
      defaultValue: 0,
      component: 'Input',
      dependencies: {
        show: false,
        // 随意一个字段改变时，都会触发
        triggerFields: [''],
      },
    },
    {
        fieldName: 'avatar',
        component: 'ImageUpload',
        label: '头像',
        componentProps: {
          maxCount: 1,
        },
    },
    {
        fieldName: 'nick_name',
        label: '昵称',
        component: 'Input',
        componentProps: {
            placeholder: '请输入昵称',
        },
        rules: 'required',
    },
    {
        fieldName: 'email',
        label: '邮箱',
        component: 'Input',
        componentProps: {
            placeholder: '请输入邮箱',
        },
    },
    {
        fieldName: 'mobile',
        label: '手机号',
        component: 'Input',
        componentProps: {
            placeholder: '请输入手机号',
        },
    },
    {
        fieldName: 'gender',
        label: '性别',
        component: 'RadioGroup',
        defaultValue: 1,
        componentProps: {
          buttonStyle: 'solid',
          options: [
            { label: '男', value: 1 },
            { label: '女', value: 0 },
          ],
          optionType: 'button',
        },
    },
    {
        fieldName: 'password',
        label: '新密码',
        component: 'InputPassword',
        componentProps: {
            placeholder: '请输入新密码',
        },
        description: '不填写则不修改',
        controlClass: 'grow',
        wrapperClass: 'flex-wrap',
        formItemClass: 'items-start',
        labelClass: 'pt-[5px]',
    },
  ],
  showDefaultActions: true,
  actionWrapperClass: 'text-left pl-[100px]',
  actionButtonsReverse: true
});

detailApi().then((res) => {
    formApi.setValues(res);
});
function onSubmit(values: Record<string, any>) {
    spinning.value = true;
    editApi(values).then((res) => {
      message.success({
        content: res.message,
      });
      spinning.value = false;
    });
}
</script>
<template>
  <Page>
    <div class="bg-card rounded-md p-5">
      <div class="text-[1rem] pb-5">个人中心</div>
      <div class="lg:w-[500px]">
        <Spinner :spinning="spinning">
          <Form />
        </Spinner>
      </div>
    </div>
  </Page>
</template>
